<template>
	<view id="Login">
		<view class="header">
			<image src="https://img0.baidu.com/it/u=3773056795,4059865197&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" mode=""
				class="header-image"></image>
		</view>
		<view class="main">
			<view class="row">
				<button type="primary" @click="Login">登录</button>
			</view>
			<view class="foot">
				<checkbox value="cb" checked="" />
				<a href="">我已同意《空间注册协议》和《隐私条款》</a>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive
	} from 'vue';
	import {
		get,
		post
	} from '../../utils/api.js'
	import {
		loginByWechat
	} from '../../utils/login.js'
	import useUserStore from '@/store/user.js'

const userStore = useUserStore()

	// 获取用户信息
	const userinfo = reactive({
		nickName: '', // 用户名称
		avatarUrl: '', // 用户头像
		openid: '', // 用户唯一标识符 用于登录验证 用户信息等操作

	})
	const Login = () => {
		// 登陆前 触发获取权限的弹窗

		uni.showModal({
			title: '登录获取权限提醒',
			content: '是否同意获取权限',
			success: function(res) {
				if (res.confirm) {
					console.log('用户点击确定');
					// 由于微信策略 发生改变高版本的无法获取用户昵称和用户头像
					// 只能获取默认信息
					uni.getUserInfo({
						desc: '登录的数据',
						success(user) {
							console.log(user,'这是信息')
							// 获取微信用户头像与名称
							userinfo.nickName = user.userInfo.nickName // 用户名称
							userinfo.avatarUrl = user.userInfo.avatarUrl // 用户头像
							// 调用登录
							uni.login({
								provider: 'weixin',
								success(code) {
									console.log(code)
									uni.request({
										url: 'https://api.weixin.qq.com/sns/jscode2session',
										method: 'GET',
										data: {
											appid: 'wx225c151eb649feb1',
											secret: '8176a2e106da487493d2dc415987ee5e',
											js_code: code.code,
											grant_type: 'authorization_code'
										},
										success(res2) {
											console.log(res2, 'res2')
											// 获取唯一openid
											userinfo.openid = res2.data.openid // 用户唯一标识符 用于登录验证 用户信息等操作
											// 将用户信息存入pinia与本地
											userStore.fillUser(userinfo)
											// 本地
											uni.setStorageSync('userinfo',userinfo)
											uni.showToast({
												title : '登陆成功',
												icon: 'none'
											})
											// 跳转到首页 页面的tabbar 不能用navigateTo 只能用switchTab 跳转
											uni.switchTab({
												url:'/pages/HomePage/HomePage'
											})
										}
									})
								}
							})
						},
						fail(err) {
							uni.showToast({
								title: '错误',
								icon: 'none'
							})
							console.log(err)
						}
					})
				} else if (res.cancel) {
					console.log('用户点击取消');
					uni.showToast({
						title: '获取失败',
						icon: 'none'
					})
				}
			}
		});


	}

	// export default {
	// 	data() {
	// 		return {

	// 		}
	// 	},
	// 	methods: {

	// 	}
	// }
</script>

<style lang="scss">
	#Login {
		width: 100%;
		height: 100vh;
		background-color: #DCF3FF;

		.header {
			width: 100%;
			height: 40%;
			display: flex;
			justify-content: center; // 水平居中
			align-items: center; // 垂直居中

			.header-image {
				border-radius: 50%;
				width: 150rpx;
				height: 150rpx;
			}
		}

		.main {
			width: 100%;
			height: 60%;
			box-sizing: border-box;
			padding: 10%;

			.row {
				width: 100%;
				margin-top: 60%;

			}

			.foot {
				width: 100%;
				display: flex;
				align-items: center;
				color: #0F40F5; // 设置链接颜色为蓝色
				font-size: 27rpx;
				margin: 20rpx 20rpx;
			}
		}

	}
</style>